<template>
  <div class="open-member">
    <h2>{{ memberConfig.title }}</h2>
    <p>{{ memberConfig.description }}</p>
    <el-button :type="memberConfig.buttonType" @click="handleOpenMember">
      {{ memberConfig.buttonText }}
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

// 定义组件接收的对象参数
const props = defineProps<{
  memberConfig: {
    title: string; // 标题
    description: string; // 描述信息
    buttonText: string; // 按钮文本
    buttonType: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'; // 按钮类型
  };
}>();

// 定义触发的事件
const emit = defineEmits(['openMember']);

// 处理开通会员操作
const handleOpenMember = () => {
  emit('openMember');
};
</script>

<style scoped>
.open-member {
  text-align: center;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.open-member h2 {
  margin-bottom: 10px;
}

.open-member p {
  margin-bottom: 20px;
  color: #666;
}
</style>
